import React from 'react';
import { SplitButton, Button, Balloon } from '@teamix/ui';
import track from 'utils/track';
import intl from '../../../../../../../../locale';

export default class AddBtn extends React.Component {
  newRepoTrack = () => {
    const { isListEmpty } = this.props;
    track({
      action: 'new_repo',
      page: 'Group-sub',
      type: isListEmpty ? 'empty list' : '',
      control: '',
    });
  };

  newGroupTrack = () => {
    const { isListEmpty } = this.props;
    track({
      action: 'new_group',
      page: 'Group-sub',
      type: isListEmpty ? 'empty list' : '',
      control: 'subgroup',
    });
  };

  render() {
    const { hasGroupAccess, hasProjectAccess, openModal, message } = this.props;
    if (!hasProjectAccess && hasGroupAccess) {
      return (
        <Button
          type="primary"
          onClick={() => {
            openModal('createGroupModalShow');
            this.newGroupTrack();
          }}
        >
          {intl.get({
            id: 'code-assets.containers.title.btn.CreateASubcodeGroup',
            defaultMessage: '新建子代码组',
          })}
        </Button>
      );
    }
    if (hasProjectAccess && !hasGroupAccess) {
      return (
        <Button
          type="primary"
          onClick={() => {
            openModal('createProjectModalShow');
            this.newRepoTrack();
          }}
        >
          {intl.get({
            id: 'code-assets.containers.title.btn.CreateACodeLibrary',
            defaultMessage: '新建代码库',
          })}
        </Button>
      );
    }
    if (!hasGroupAccess && !hasProjectAccess) {
      return (
        <Balloon.Tooltip
          trigger={
            <SplitButton
              label={intl.get({
                id: 'code-assets.containers.title.btn.CreateACodeLibrary',
                defaultMessage: '新建代码库',
              })}
              type="primary"
              disabled
            >
              <SplitButton.Item>
                {intl.get({
                  id: 'code-assets.containers.title.btn.CreateASubcodeGroup',
                  defaultMessage: '新建子代码组',
                })}
              </SplitButton.Item>
            </SplitButton>
          }
          align="t"
        >
          {message}
        </Balloon.Tooltip>
      );
    }
    return (
      <SplitButton
        label={intl.get({
          id: 'code-assets.containers.title.btn.CreateACodeLibrary',
          defaultMessage: '新建代码库',
        })}
        type="primary"
        leftButtonProps={{
          onClick: () => {
            openModal('createProjectModalShow');
            this.newRepoTrack();
          },
        }}
      >
        <SplitButton.Item
          onClick={() => {
            openModal('createGroupModalShow');
            this.newGroupTrack();
          }}
        >
          {intl.get({
            id: 'code-assets.containers.title.btn.CreateASubcodeGroup',
            defaultMessage: '新建子代码组',
          })}
        </SplitButton.Item>
      </SplitButton>
    );
  }
}
